<template>
  <Sign-up>
    <el-form
            ref="registerForm"
            label-width="80px"
            class="registerForm"
            :model="registerForm"
            :rules="registerRules"
    >
      <el-form-item label="用户名" prop="username">
        <el-input placeholder="请输入用户名" v-model="registerForm.username"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input placeholder="请输入邮箱" v-model="registerForm.email"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input placeholder="请输入密码" type="password" v-model="registerForm.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="password2">
        <el-input placeholder="确认密码" type="password" v-model="registerForm.password2"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="mobile">
        <el-input placeholder="请输入电话" v-model="registerForm.mobile"></el-input>
      </el-form-item>
      <el-form-item label="身份" prop="identity">
        <el-select v-model="registerForm.identity" placeholder="请选择身份">
          <el-option
                  v-for="item in identity"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邀请码" prop="InvitationCode2" v-if="isShow">
        <el-input placeholder="注册管理员需要邀请码" v-model="registerForm.InvitationCode2" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="submit_btn" @click="register">注册</el-button>
      </el-form-item>

      <div class="tiparea">
        <p>
          已有账号，现在
          <router-link to="/login">登录</router-link>
        </p>
      </div>
    </el-form>
  </Sign-up>
</template>

<script>
  import SignUp from "../components/SignUp"

  export default {
    name: "register",
    data() {
      const password2 = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入确认密码'))
        } else if (this.registerForm.password2 !== this.registerForm.password) {
          return callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      }

      return {
        isShow: false,
        registerForm: {
          username: '',
          email: '',
          password: '',
          mobile: '',
          password2: '',
          identity: '',
          InvitationCode2: '',
        },
        registerRules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur'}
          ],
          email: [{required: true, message: '请输入邮箱', trigger: 'blur'},],
          mobile: [{required: true, message: '请输入电话', trigger: 'blur'},],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ],
          identity: [{required: true, message: '请选择身份', trigger: 'blur'},],
          InvitationCode2: [{required: true, message: '请输入邀请码', trigger: 'blur'}],
          password2: [{validator: password2, trigger: 'blur', required: true}]
        },
        identity: [{
          value: '普通用户',
          label: '普通用户',
        }, {
          value: '管理员',
          label: '管理员',
        }],
        InvitationCode1: '19980815',
      }
    },
    methods: {
      register() {
        this.$refs.registerForm.validate(valid => {
          if (valid) {
            if (this.registerForm.InvitationCode2 !== this.InvitationCode1 && this.registerForm.identity === '管理员') {
              return this.$message.error('邀请码不正确!')
            }
            this.$store.dispatch('addUser', this.registerForm)
              .then(() => {
                this.$message.success('注册成功')
                this.$router.push('/login')
              })
              .catch(err => {
                this.$message.error(err.data.user)
              })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      }
    },
    components: {
      SignUp
    },
    watch: {
      'registerForm.identity'() {
        if (this.registerForm.identity === '管理员') {
          this.isShow = true
        }else{
          this.isShow = false
        }
      }
    }
  }
</script>

<style scoped>

  .registerForm {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px 40px 20px 20px;
    border-radius: 5px;
    box-shadow: 0px 5px 10px #cccc;
  }

  .submit_btn {
    width: 100%;
  }

  .tiparea {
    text-align: center;
    font-size: 12px;
    color: #333;
  }

  .tiparea p a {
    color: #409eff;
  }
</style>
